import React from "./react";
import ReactDOM from "./react-dom";

function FunctionComponent(props) {
    return React.createElement("h1", { style: props.style }, "hellow rootElement", props.name);
}

const rootElement = <FunctionComponent name="aaaa" style={{ color: "red" }}></FunctionComponent>;
// 1 babel ==> FunctionComponent
// React.createElement(FunctionComponent, { name="aaaa" style={{ color: "red" } });

// 2 FunctionComponent ==> vdom
// $$typeof: Symbol(react.element)
// key: null
// props: {name: 'aaaa', style: {…}}
// ref: null
// type: ƒ FunctionComponent(props)
ReactDOM.render(rootElement, document.getElementById("root"));

// 核心思路
// 通过function()的执行拿到最终的createElement产生的vNode
// createDom ==> 转成真实的dom
// 处理函数式组件
// function mountFunctionComponent(dom) {
//     let { type, props } = dom;
//     let functionVnode = type(props);
//     return createDom(functionVnode);
// }
